<template>
	<view class="main-content">
		<image src="https://resource.lanbaozixun.com/uploads/images/2024072315052065eda2135.png" mode="widthFix" class="w-full header-bg" alt="" />
		
		<view class="">
			<view class="content-area">
				<view class="bg-white row row-between search-input-area">
					<u-icon name="search" color="#666666"></u-icon>
					<u-input v-model="searchContent" input-align="left" placeholder="请输入错误码"  :border="false" class="u-margin-right-15 u-padding-left-10" />
				</view>
				<u-button @click="queryErrorInfoFun" hover-class="none" :hair-line="false" :custom-style="{borderRadius:'100rpx',borderColor:'transparent',background:'linear-gradient(180deg, rgba(107, 178, 255, 1) 0%, rgba(67, 126, 234, 1) 100%)',color:'white',margin:'0 2.5%'}">查询</u-button>
				<view class="top-search-area ">
					<view class="row u-row-between u-margin-bottom-30">
						<view class="xs">
							历史搜索
						</view>
						<u-icon  v-if="historyRecords.length > 0" name="trash" color="#82848a" @click="clearHistoryRecords"></u-icon>
					</view>
					<view class="u-flex u-wrap u-margin-top-20">
						<u-tag v-for="(v,k) in historyRecords" :key="k" :text="v" @tap="selectHistoryRecords(k)" bg-color="#FFF" color="#595757" mode="dark" type="info" class="u-margin-right-16" />
					</view>
					<u-empty mode="search" v-if="historyRecords.length <= 0"></u-empty>
				</view>
			</view>
			
			<u-popup v-model="subscribeWechatOfficialAccountPopupShowStatus" :mask-close-able="false" mode="center" width="60%" :border-radius="16">
				<view class="bg-white u-padding-30">
					<view class="xxl bold u-text-center">请关注公众号</view>
					
					<image src="https://resource.lanbaozixun.com/uploads/images/2024060520450642b3d4168.jpg" mode="widthFix" class="qrCode"></image>
					
					<u-button @click="refreshSubscribeStatus" hover-class="none" :hair-line="false" :custom-style="{borderRadius:'100rpx',borderColor:'transparent',background:'#66a6ff',color:'white',margin:'0 2.5%'}">刷新关注状态</u-button>
				</view>
			</u-popup>
		</view>
		<view class="footer u-flex u-row-between u-text-center">
			<view class="footer-item" @click="dial">
				<image src="https://resource.lanbaozixun.com/uploads/images/20240723152234095e24686.png" mode="widthFix" class="icon-xxl"></image>
				<view class="xs mt10 font-weight-500">电话咨询</view>
			</view>
			<view class="footer-item" @click="goPage('/pages/index/index')">
				<image src="https://resource.lanbaozixun.com/uploads/images/2024072315223420e942979.png" mode="widthFix" class="icon-xxl"></image>
				<view class="xs mt10 font-weight-500">贷款超市</view>
			</view>
			<view class="footer-item" @click="goPage('/pages/bundle/company/introduce')">
				<image src="https://resource.lanbaozixun.com/uploads/images/20240723152545ca8075646.png" mode="widthFix" class="icon-xxl"></image>
				<view class="xs mt10 font-weight-500">关于我们</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from "@/utils/login";
	import {getService} from "@/api/app"
	import {isWeixinClient} from "@/utils/tools"
	import {wheteFollowWechatOfficialAccount} from "@/api/user"
	import {
		mapGetters,
	} from "vuex";
	export default {
		data() {
			return {
				phoneNumber:'',
				searchContent:'',
				historyRecords:[],
				qrCode:'',
				subscribeWechatOfficialAccountPopupShowStatus:false
			};
		},
		onLoad() {
			this.getServiceFun()
			this.queryHistoryRecordsFun()
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '错误码查询';
				o.shareDesc = '错误码查询';
				w.share(o)
			})
		},
		onShareAppMessage() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '错误码查询',
				path: "yixu/pages/error_code/inquire?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareTimeline() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '错误码查询',
				path: "yixu/pages/error_code/inquire?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		computed: {
			...mapGetters(["inviteCode"]),
		},
		methods:{
			getServiceFun(){
				let _this = this;
				getService().then(res =>{
					let data = res.data;
					_this.phoneNumber = data.phone;
				});
			},
			queryHistoryRecordsFun(){
				let d = uni.getStorageSync('error_code_serach_history_record');
				if(d)this.historyRecords = JSON.parse(d)
			},
			clearHistoryRecords(){
				this.historyRecords = [];
				uni.removeStorageSync('error_code_serach_history_record')
			},
			selectHistoryRecords(index){
				this.searchContent = this.historyRecords[index]||'';
				this.historyRecords.splice(index,1)
				this.queryErrorInfoFun()
			},
			
			isContentSerach(c){
				this.historyRecords.forEach((v,k)=>{
					if(v == c)this.historyRecords.splice(k,1)
				})
			},
			dial(){
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber.toString()
				});
			},
			goPage(url){
				if(url == '/'){
					uni.switchTab({
						url
					})
				}else{
					uni.navigateTo({
						url,
						fail(e) {
							console.log(e)
						}
					})
				}
			},
			async refreshSubscribeStatus(){
				const _this = this;
				if(isWeixinClient()){
					if (!this.isLogin) return toLogin();
					let {code,data} = await wheteFollowWechatOfficialAccount();
					if(code == 1 && data.subscribe == 0){
						_this.qrCode = data.qr_code;
						_this.subscribeWechatOfficialAccountPopupShowStatus = true;
						return false;
					}else{
						_this.subscribeWechatOfficialAccountPopupShowStatus = false;
					}
				}
			},
			async queryErrorInfoFun(){
				if(this.$u.test.isEmpty(this.searchContent))return this.$u.toast('请输入查询内容');
				this.refreshSubscribeStatus()
				this.isContentSerach(this.searchContent)
				this.historyRecords.push(this.searchContent)
				uni.setStorageSync('error_code_serach_history_record',JSON.stringify(this.historyRecords));
				
				uni.navigateTo({
					url: '/pages/product/article/index?type=1&keyword=' + this.searchContent
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background: #f2f2f3;
		background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, rgba(224, 242, 255, 1) 23.69%, rgba(156, 215, 255, 1) 72.53%, rgba(120, 201, 255, 1) 100%);

		.main-content {
			height: 100vh;
			background: url('https://resource.lanbaozixun.com/uploads/images/202407231501482b2f30593.png') no-repeat;
			background-size: 100% auto;
			
			.header-bg{
				width: 100vw;
			}
			
			.content-area-top-bg{
				width: 95vw;
				margin: 24rpx 2.5vw;
			}

			.content-area {
				width: 80vw;
				margin: 0 auto;
				position: relative;
				border-radius: 10rpx;
				
				.search-input-area{
					background: white;
					border-radius: 100rpx;
					margin-bottom: 4vh;
					padding: 8rpx 32rpx !important;
				}
				
				.search-area{
					margin: 32rpx;
					padding-left: 16rpx;
					border-radius: 10rpx;
					border: 2rpx solid #66a6ff;
				}
				
				.top-search-area{
					margin:5vh 32rpx 32rpx;
				}
			}
			
			.footer{
				width: 90vw;
				margin: 0 auto; 
				
				
				.footer-item{
					width: 30%;
					padding: 16rpx;
				}
			}
		}
	}
	.qrCode{
		width: 90%;
		display: block;
		margin: 32rpx auto;
	}
</style>